<script setup lang="ts">
import { ref } from "vue";
import { useMainStore } from "@/store/main";
import { NButton } from "naive-ui";
const mainStore = useMainStore();

console.log(import.meta.env.VITE_APP_WEB_URL);
defineProps<{ msg: string }>();

const updateName = () => {
  mainStore.$patch({
    name: "名称被修改了，nameLength也随之改变",
  });
};
</script>

<template>
  <n-config-provider>
    <div>
      <div>用户名:{{ mainStore.name }}<br />长度:{{ mainStore.nameLength }}</div>
      <hr />
      <button @click="updateName">修改store中的name</button>
      <n-button>naive-ui</n-button>
    </div>
  </n-config-provider>
</template>

<style lang="scss" scoped>
a {
  color: #42b983;
}

.test {
  color: $test-color;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>
